<template>
  <div class="vote">
    <div class="voteSet_top_wrap">
      <div
        class="top_item"
        @click="handleChange(index)"
        :class="{ active: current === index }"
        v-for="(item, index) in topList"
        :key="index"
      >
        <div class="title">{{ item.title }}</div>
        <!-- <div class="eng">{{ item.eng }}</div> -->
      </div>
    </div>
    <div class="detail_wrap">
      <voteSet v-if="current == 0"></voteSet>
      <antiBrush v-if="current == 1"></antiBrush>
    </div>
  </div>
</template>

<script>
import voteSet from "./voteChildren/voteSet";
import antiBrush from "./voteChildren/antiBrush";

import { mapGetters } from "vuex";
import { LreItem, LsetItem } from "@/utils/storage";
export default {
  data() {
    return {
      topList: [
        {
          title: "投票设置",
          eng: "Vote setting",
        },
        {
          title: "防刷票设置",
          eng: "Anti-brushing ticket setting",
        },
      ],
    };
  },
  computed: {
    ...mapGetters("status", {
      current: "current",
    }),
  },
  components: {
    voteSet,
    antiBrush,
  },
  methods: {
    handleChange(index) {
      LsetItem("current", index);
      this.$store.commit("status/SET_CURRENT", index);
    },
  },
  destroyed() {
    LreItem("current");
    this.$store.commit("status/SET_CURRENT", 0);
  },
};
</script>


<style lang="scss" scoped>
.vote {
  height: 100%;
  .voteSet_top_wrap {
    display: flex;
    .top_item {
      margin-right: 25px;
      cursor: pointer;
      color: rgb(191, 192, 196);
       padding-bottom: 10px;
      border-bottom: 2px solid transparent;
      &.active {
        color: $themeColor;
        border-bottom: 2px solid $themeColor;
      }
      .title {
        font-size: 18px;
        font-weight: 500;
      }
      .eng {
        font-size: 10px;
        font-weight: 500;
      }
    }
  }
   .detail_wrap {
    padding-top: 50px;
  }
}
</style>